<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>起步</h1>
					<div id="box1" class="box">
						<h2>1. uni-app 简介</h2>
						<p>uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到
							iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。</p>
						<el-image style="width: 100%;" :src="srcList[0]" fit="contain" :preview-src-list="srcList">
						</el-image>
						<div class="tip">
							详细的 uni-app 官方文档，请翻阅 <a
								href="https://uniapp.dcloud.net.cn/">https://uniapp.dcloud.net.cn/</a>
						</div>
					</div>
					<div id="box2" class="box">
						<h2>2. 开发工具</h2>
						<div class="header">
							<p>uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：</p>
							<ul>
								<li>模板丰富</li>
								<li>完善的智能提示</li>
								<li>一键运行</li>
							</ul>
							<div class="tip">
								当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！
							</div>
						</div>
						<div class="item" id="box2-1">
							<h3>2-1. 下载 HBuilderX</h3>
							<ol>
								<li>访问 HBuilderX 的官网首页 <a
										href="https://www.dcloud.io/hbuilderx.html">https://www.dcloud.io/hbuilderx.html</a>
								</li>
								<li>点击首页的 DOWNLOAD 按钮</li>
								<li>选择下载 正式版 -> App 开发版</li>
							</ol>
						</div>
						<div class="item" id="box2-2">
							<h3>2-2. 安装 HBuilderX</h3>
							<ol>
								<li>将下载的 zip包 进行解压缩</li>
								<li>将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）</li>
								<li>双击 HBuilderX.exe 即可启动 HBuilderX</li>
							</ol>
						</div>
						<div class="item" id="box2-3">
							<h3>2-3. 安装 scss/sass 编译</h3>
							<p>为了方便编写样式，建议安装 scss/sass 编译 插件。插件下载地址：</p>
							<div class="tip">https://ext.dcloud.net.cn/plugin?name=compile-node-sass</div>
							<p>进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：</p>
							<el-image style="width: 100%;" :src="srcList[1]" fit="contain" :preview-src-list="srcList">
							</el-image>
						</div>
						<div class="item" id="box2-4">
							<h3>2-4. 快捷键方案切换</h3>
							<p>操作步骤：工具 -> 预设快捷键方案切换 -> VS Code</p>
							<el-image style="width: 100%;" :src="srcList[2]" fit="contain" :preview-src-list="srcList">
							</el-image>
						</div>
						<div class="item" id="box2-5">
							<h3>2-5. 修改编辑器的基本设置</h3>
							<p>操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置</p>
							<el-image style="width: 100%;" :src="srcList[3]" fit="contain" :preview-src-list="srcList">
							</el-image>
							<p>源码视图下可用的参考配置：</p>
							<div class="code">
								<code-mirror :value="code.code1" :options="cmOptions" disabled> </code-mirror>
							</div>
							<div class="tip">
								Tips：可以使用 Ctrl + 鼠标滚轮 缩放编辑器
							</div>
						</div>
					</div>
					<div id="box3" class="box">
						<h2>3. 新建 uni-app 项目</h2>
						<ol>
							<li>
								<p>文件 -> 新建 -> 项目</p>
								<el-image style="width: 100%;" :src="srcList[4]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>填写项目基本信息</p>
								<el-image style="width: 100%;" :src="srcList[5]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>项目创建成功</p>
								<el-image style="width: 100%;" :src="srcList[6]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
						</ol>
					</div>
					<div id="box4" class="box">
						<h2>4. 目录结构</h2>
						<p>一个 uni-app 项目，默认包含如下目录及文件：</p>
						<div class="code">
							<code-mirror :value="code.code2" :options="cmOptions" disabled> </code-mirror>
						</div>
					</div>
					<div class="box" id="box5">
						<h2>5. 把项目运行到微信开发者工具</h2>
						<ol>
							<li>
								<p>填写自己的微信小程序的 AppID：</p>
								<el-image style="width: 100%;" :src="srcList[7]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在 HBuilderX 中，配置“微信开发者工具”的安装路径：</p>
								<el-image style="width: 100%;" :src="srcList[8]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在微信开发者工具中，通过 <b>设置 -> 安全设置 面板</b>，开启“微信开发者工具”的服务端口：</p>
								<el-image style="width: 100%;" :src="srcList[9]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在 HBuilderX 中，点击菜单栏中的 <b>运行 -> 运行到小程序模拟器 -> 微信开发者工具</b>，将当前 uni-app
									项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：</p>
								<el-image style="width: 100%;" :src="srcList[10]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>初次运行成功之后的项目效果：</p>
								<el-image style="width: 100%;" :src="srcList[11]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
								<div class="tip">
									修改配置需要再uniapp项目里面
								</div>
							</li>
						</ol>
					</div>
					<div id="box6" class="box">
						<h2>6. 使用 Git 管理项目</h2>
						<div class="item" id="box6-1">
							<h3>6-1. 本地管理</h3>
							<ol>
								<li>
									<p>在项目根目录中新建 <b>.gitignore</b> 忽略文件，并配置如下：</p>
									<div class="code">
										<code-mirror :value="code.code3" :options="cmOptions" disabled> </code-mirror>
									</div>
									<div class="tip">
										注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪
									</div>
									<div class="tip">
										此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位
									</div>
								</li>
								<li>
									<p>打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：</p>
									<div class="code">
										<code-mirror :value="code.code4" :options="cmOptions" disabled> </code-mirror>
									</div>
								</li>
								<li>
									<p>将所有文件都加入到暂存区：</p>
									<div class="code">
										<code-mirror :value="code.code5" :options="cmOptions" disabled> </code-mirror>
									</div>
								</li>
								<li>
									<p>本地提交更新：</p>
									<div class="code">
										<code-mirror :value="code.code6" :options="cmOptions" disabled> </code-mirror>
									</div>
								</li>
							</ol>
						</div>
						<div class="item" id="box6-2">
							<ol>
								<li>注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）</li>
								<li>生成并配置 SSH 公钥</li>
								<li>创建空白的码云仓库</li>
								<li>把本地项目上传到码云对应的空白仓库中</li>
							</ol>
						</div>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer' :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"
					@click="handleClick">
					<a-anchor-link href="#box1" title="1 uni-app 简介" />
					<a-anchor-link href="#box2" title="2. 开发工具">
						<a-anchor-link href="#box2-1" title="2-1. 下载 HBuilderX" />
						<a-anchor-link href="#box2-2" title="2-2. 安装 HBuilderX" />
						<a-anchor-link href="#box2-3" title="2-3. 安装 scss/sass 编译" />
						<a-anchor-link href="#box2-4" title="2-4. 快捷键方案切换" />
						<a-anchor-link href="#box2-5" title="2-5. 修改编辑器的基本设置" />
					</a-anchor-link>
					<a-anchor-link href="#box3" title="3. 新建 uni-app 项目" />
					<a-anchor-link href="#box4" title="4. 目录结构" />
					<a-anchor-link href="#box5" title="5. 把项目运行到微信开发者工具" />
					<a-anchor-link href="#box6" title="6.  使用 Git 管理项目">
						<a-anchor-link href="#box6-1" title="6-1. 本地管理" />
						<a-anchor-link href="#box6-2" title="6-2. 把项目托管到码云" />
					</a-anchor-link>
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import img1 from '@/assets/img1/img1-1.png'
	import img2 from '@/assets/img1/img1-2.png'
	import img3 from '@/assets/img1/img1-3.png'
	import img4 from '@/assets/img1/img1-4.png'
	import img5 from '@/assets/img1/img1-5.png'
	import img6 from '@/assets/img1/img1-6.png'
	import img7 from '@/assets/img1/img1-7.png'
	import img8 from '@/assets/img1/img1-8.png'
	import img9 from '@/assets/img1/img1-9.png'
	import img10 from '@/assets/img1/img1-10.png'
	import img11 from '@/assets/img1/img1-11.png'
	import img12 from '@/assets/img1/img1-12.png'
	import {
		startView
	} from '../../util/code.js'
	export default {
		name: 'startView',
		data() {
			return {
				srcList: [
					img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12
				],
				cmOptions: {
					mode: "text/javascript",
					theme: "base16-dark"
				},
				code: startView
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
